<template>
  <h2>Stable Diffusion Prompt Tag Generator  SD提示器生成器</h2>
  <el-row :gutter="10">
    <el-col :span="18">
      <el-row >
        <el-col :span="24" >
          <div  class="swith-css">

            <div class="switch-button-div" style="display: inline-block">
              <div class="switch-button"><p>English</p></div>
              <div class="switch-button">
                <el-switch
                    v-model="engSwitch"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    width="50"
                    active-text="ON"
                    inactive-text="OFF">
                </el-switch>
              </div>
            </div>

            <div class="switch-button-div" style="display: inline-block">
              <div class="switch-button"><p>中文</p></div>
              <div class="switch-button">
                <el-switch
                    v-model="zhznSwitch"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    width="50"
                    active-text="ON"
                    inactive-text="OFF">
                </el-switch>
              </div>
            </div>

            <div class="switch-button-div" style="display: inline-block">
              <div class="switch-button"><p>降权-</p></div>
              <div class="switch-button">
                <el-switch
                    v-model="subtractWeightSwitch"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    width="50"
                    active-text="ON"
                    inactive-text="OFF">
                </el-switch>
              </div>
            </div>

            <div class="switch-button-div" style="display: inline-block">
              <div class="switch-button"><p>加权+</p></div>
              <div class="switch-button">
                <el-switch
                    v-model="addWeightSwitch"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    width="50"
                    active-text="ON"
                    inactive-text="OFF">
                </el-switch>
              </div>
            </div>

            <div class="switch-button-div" style="display: inline-block">
              <div class="switch-button"><p>删除x</p></div>
              <div class="switch-button">
                <el-switch
                    v-model="deleteSwitch"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    width="50"
                    active-text="ON"
                    inactive-text="OFF">
                </el-switch>
              </div>
            </div>

            <div class="switch-button-div" style="display: inline-block">
              <div class="switch-button"><p>加权符号转换</p></div>
              <div class="switch-button">
                <el-switch
                    v-model="symbolSwitch"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    width="50"
                    active-text="ON"
                    inactive-text="OFF">
                </el-switch>
              </div>
            </div>

          </div>

        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
          <div class="prompt-edit" style="background-color: #e0e1e5;width: 100%;height: 150px">

          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-input
              v-model="promptstr"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
          />
        </el-col>
        <el-col :span="2">
          <div style="display: inline-block;padding-left: 5px">
            <div style="display: inline-block;padding-top: 10px">
              <el-button size="small" type="success" @click="copyPositive(0)" >复制 copy</el-button>
            </div>
            <div style="display: inline-block;padding-top: 10px">
              <el-button size="small" type="warning" @click="clearText()">清空 clear</el-button>
            </div>

          </div>

        </el-col>
      </el-row>
      <div style="margin: 20px"></div>
      <el-row>
        <el-col :span="24">
          <el-tabs type="border-card">

            <el-tab-pane v-for="item in tabPanes " :label="item.tag_name" :key="item">
              <div v-for="fit in item.prompt_list" :key="fit" style="display: inline-block;">
                <div style="color: #da2f2f;padding: 10px" @click="appendPrompt(fit.prompt_eng)">
                  <div style="display:inline-block;padding-right: 2px">
                    <p>{{fit.prompt_cn}}</p>
                  </div>
                  <div style="display:inline-block;">
                    <p>{{fit.prompt_eng}}</p>
                  </div>
                </div>

              </div>
            </el-tab-pane>


          </el-tabs>
        </el-col>
      </el-row>


      <div>
        <h3 style="color: black;">我的常用起手式</h3>
      </div>

      <el-row>
        <el-col :span="22">
          <el-form-item label="正向">
            <el-input v-model="startStylePositive" min="500" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <div style="padding-left: 5px;padding-top: 5px">
            <el-button size="small" type="success" @click="copyPositive(1)">复制 copy</el-button>
          </div>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="负向">
            <el-input v-model="startStyleNegative" min="500" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <div style="padding-left: 5px;padding-top: 5px">
            <el-button size="small" type="success" @click="copyPositive(2)">复制 copy</el-button>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-form :model="ruleForm" label-width="120px" :rules="rules" ref="ruleForm" label-position="left">
        <el-form-item label="标签"  prop="tagId">
          <el-select-v2 v-model="ruleForm.tagId" placeholder="请选择标签" :options="tagOptions">
          </el-select-v2>
        </el-form-item>
        <el-form-item label="提示词（英文）" prop="promptEng">
          <el-input v-model="ruleForm.promptEng" />
        </el-form-item>
        <el-form-item label="提示词（中文）" prop="promptCn">
          <el-input v-model="ruleForm.promptCn" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>


</template>

<script>

import axios from "axios";
import {apiAcceptData, apiSend} from "@/api";
import {ElMessage} from "element-plus";
// import { ElMessage } from 'element-plus'

export default {
  name: "PromptStore",
  data(){
    return {
      engSwitch : true,
      zhznSwitch:true,
      subtractWeightSwitch:true,
      addWeightSwitch:true,
      deleteSwitch:true,
      symbolSwitch:true,
      promptstr:'',
      startStylePositive :'masterpiece, best quality, masterpiece,best quality,official art,extremely detailed CG unity 8k wallpaper,',
      startStyleNegative :'nsfw, lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, bad feet,',
      form:{tagId:'',promptEng:'',promptCn:''},
      ruleForm: {
        tagId: '',
        promptEng:'',
        promptCn:''
      },
      rules: {
        tagId:[
            {required: true, message: '请选择标签分类', trigger: 'change'},
        ],
        promptEng:[
            {required: true, message: '请输入英文提示词', trigger: 'blur'},
        ],
        promptCn:[
            {required: true, message: '请输入中文输入词', trigger: 'blur'},
        ],
      },
      tagOptions:[],
      tabPanes:[]

    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 保存到数据库中

          let apiResult = apiSend('sdprompt/addPrompt',this.ruleForm);
          if(apiResult){
            this.resetForm(formName)
            return true
          }

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 复制到剪贴板
    copyPositive(type){
      let tt = '';
      switch (type) {
        case 0:
          tt = this.promptstr;
          break;
        case 1:
          tt = this.startStylePositive;
          break;
        case 2:
          tt = this.startStyleNegative;
      }
      const input_dom = document.createElement('textarea');
      input_dom.value = tt;
      document.body.appendChild(input_dom)
      input_dom.select();
      document.execCommand('copy');
      ElMessage({
        message: '已复制',
        type: 'success',
      })
      document.body.removeChild(input_dom)
    },
    // 清空输入框
    clearText(){
      this.promptstr = ''
    },
    async getTabPanels(){

      this.tabPanes =  await apiAcceptData('/sdprompt/getPromptListAndSort',null);

    },
    appendPrompt(prompt){
      if(this.promptstr === '' || this.promptstr === undefined){
        this.promptstr = prompt
      }else{
        this.promptstr = this.promptstr+","+prompt
      }
    }
  },
  beforeCreate(){

    // var that = this
    axios.get(this.$mhconfig.apiUrl+'/sdprompt/sdprompttag')
        .then(response => {
          let result = response
          result.forEach( element =>{
            this.tagOptions.push({label:element.label,value:element.value})
          })

        })
        .catch(error => {
          console.error('Error fetching data', error);
        });
  },
  created() {
    this.getTabPanels();
  }
}
</script>

<style scoped>
.switch-button-div {
  display: inline-block;
  padding-right: 15px;
}
.switch-button{
  display: inline-block;
  padding-right: 5px;
}
.switch-button p{
  color: black;
}

</style>